@import './theme.scss';

// 全局样式
page {
  color: $text-primary;
  font-size: $font-size-md;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

// 导航栏样式
.uni-navbar {
  background-color: var(--primary-color) !important;
  
  .uni-navbar__header-title {
    color: var(--button-text-color) !important;
  }
  
  .uni-navbar__btn {
    color: var(--button-text-color) !important;
  }
}

// 底部导航栏样式
.uni-tabbar {
  .uni-tabbar__item {
    &.uni-tabbar__item--active {
      color: var(--primary-color) !important;
    }
  }
}

// 卡片样式
.card {
  @include card;
  margin: $spacing-md;
  transition: all $animation-duration $animation-timing-function;
  
  &:active {
    transform: scale(0.98);
  }
}

// 按钮样式
.btn-primary {
  @include button-primary;
}

.btn-outline {
  @include button-outline;
}

// 列表样式
.list-item {
  @include flex-between;
  padding: $spacing-md;
  background: $bg-primary;
  border-bottom: 2rpx solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

// 输入框样式
.input {
  background: $bg-primary;
  border: 2rpx solid $border-color;
  border-radius: $border-radius-md;
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-md;
  
  &:focus {
    border-color: $primary-color;
  }
}

// 标签样式
.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: $border-radius-sm;
  font-size: $font-size-sm;
  background: $primary-bg;
  color: $primary-color;
}

// 空状态样式
.empty-state {
  @include flex-center;
  flex-direction: column;
  padding: $spacing-xl 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: $spacing-md;
  }
  
  text {
    color: $text-secondary;
    font-size: $font-size-md;
  }
}

// 加载状态样式
.loading {
  @include flex-center;
  padding: $spacing-xl 0;
  
  .loading-icon {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid $primary-bg;
    border-top-color: $primary-color;
    border-radius: $border-radius-circle;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 弹窗样式
.popup {
  background: $bg-primary;
  border-radius: $border-radius-lg $border-radius-lg 0 0;
  padding: $spacing-lg;
  
  .popup-header {
    @include flex-between;
    margin-bottom: $spacing-lg;
    
    .title {
      font-size: $font-size-lg;
      font-weight: bold;
      color: $text-primary;
    }
    
    .close {
      color: $text-secondary;
      font-size: $font-size-xl;
      padding: $spacing-xs;
    }
  }
  
  .popup-content {
    padding: $spacing-md 0;
  }
  
  .popup-footer {
    margin-top: $spacing-lg;
    
    .btn {
      width: 100%;
      @include button-primary;
    }
  }
}

// 表单样式
.form-item {
  margin-bottom: $spacing-lg;
  
  .label {
    display: block;
    margin-bottom: $spacing-sm;
    color: $text-secondary;
    font-size: $font-size-sm;
  }
  
  .input {
    width: 100%;
  }
  
  .picker {
    width: 100%;
    height: 80rpx;
    background: $bg-primary;
    border: 2rpx solid $border-color;
    border-radius: $border-radius-md;
    padding: 0 $spacing-md;
    font-size: $font-size-md;
    line-height: 80rpx;
  }
  
  .textarea {
    width: 100%;
    height: 160rpx;
    background: $bg-primary;
    border: 2rpx solid $border-color;
    border-radius: $border-radius-md;
    padding: $spacing-md;
    font-size: $font-size-md;
  }
}

// 导航栏主题样式
@each $theme, $map in $themes {
  .theme-#{$theme} {
    .uni-navbar {
      background-color: map-get($map, primary-color) !important;
      
      .uni-navbar__header-title {
        color: map-get($map, button-text-color) !important;
      }
      
      .uni-navbar__btn {
        color: map-get($map, button-text-color) !important;
      }
    }
  }
} 